// lib/mixins.scss is imported into ../style.scss

@mixin hr-image($image, $width, $height) {
  @media print,
         (-webkit-min-device-pixel-ratio: 1.25),
         (-o-min-device-pixel-ratio: 5/4),
         (min-resolution: 120dpi) {
    background-image: url($image);
    background-size: $width $height;
  }
}

// ==========================================================================
// Vendorize
// Example: @include vendorize(background-size, 30px)
// ==========================================================================

@mixin vendorize($property, $value) {
  -webkit-#{$property}: $value;
  -moz-#{$property}: $value;
  -ms-#{$property}: $value;
  -o-#{$property}: $value;
  #{$property}: $value;
}

// ==========================================================================
// Absolute position
// Example: @include abs-pos(20px, 30px, auto, auto)
// ==========================================================================

@mixin abs-pos ($top: auto, $right: auto, $bottom: auto, $left: auto) {
  position: absolute;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

// ==========================================================================
// Full page backgrounds fixed if desired
// Example: @include background-cover('path/to/file.jpg')
// ==========================================================================

@mixin background-cover($path) {
  background: url($path) no-repeat center center;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}
@mixin background-cover-fixed($path) {
  background: url($path) no-repeat center center fixed;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

// ==========================================================================
// Border-box Sizing
// Example: @include border-box()
// http://bit.ly/10kDnEz
//   ==========================================================================

@mixin border-box() {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
       -o-box-sizing: border-box;
          box-sizing: border-box;
}

// ==========================================================================
// Element Shadow
// Example: @include box-shadow(5px, 5px, 5px, #000)
// ==========================================================================

@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
  @if $inset {
    -webkit-box-shadow: inset $left $top $blur $color;
       -moz-box-shadow: inset $left $top $blur $color;
            box-shadow: inset $left $top $blur $color;
  } @else {
    -webkit-box-shadow: $left $top $blur $color;
       -moz-box-shadow: $left $top $blur $color;
            box-shadow: $left $top $blur $color;
  }
}

// ==========================================================================
// Text Shadow
// Example: @include text-shadow(5px, 5px, 5px, #000)
// ==========================================================================

@mixin text-shadow($top, $left, $blur, $color) {
  -webkit-text-shadow: $left $top $blur $color;
     -moz-text-shadow: $left $top $blur $color;
          text-shadow: $left $top $blur $color;
}

// ==========================================================================
// Media Query
// Example: @include break('min-width: 321px'){ Custom CSS Styles }
// ==========================================================================

@mixin break($props) {
    @media ($props) { @content; }
}

// ==========================================================================
// Media Query (Max-Width)
// Example: @include break-max(700px){ Custom CSS Styles }
// ==========================================================================

@mixin break-max($size) {
    @media (max-width: $size) { @content; }
}

// ==========================================================================
// Media Query (Min-Width)
// Example: @include break-min(700px){ Custom CSS Styles }
// ==========================================================================

@mixin break-min($size) {
    @media (min-width: $size) { @content; }
}

// ==========================================================================
// Clear Floats
// Example: @include clearfix()
// http://bit.ly/evOPw5
// ==========================================================================

@mixin clearfix {
  *zoom: 1;
  &:before, &:after { content: " "; display: table; }
  &:after { clear: both; }
}

// ==========================================================================
// REM Font Sizing
// Example: @include hide-text()
// http://bit.ly/IhXzmm
// ==========================================================================

@mixin font-size($value: 16) {
  font-size: value + px;
  font−size: (value / 10) + rem;
}

// ==========================================================================
// Text Replacement
// Example: @include hide-text()
// http://bit.ly/Asq62d
// ==========================================================================

@mixin hide-text {
  color: transparent;
  font: 0/0 a;
  text-shadow: none;
}

// ==========================================================================
// Retina Images
// Example: @include image-2x('path/to/file.jpg', 500px, 500px)
// ==========================================================================

@mixin image-2x($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {

    /* on retina, use image that's scaled by 2 */

    background-image: url($image);
    background-size: $width $height;
  }
}

// ==========================================================================
// Removes list stylings
// Example: @include list-reset()
// ==========================================================================

@mixin list-reset() {
  list-style: none;
  border: 0;
  margin: 0;
  padding: 0;
  li { list-style: none; margin: 0; padding: 0; }
}

// ==========================================================================
// CSS3 Linear Gradient (with IE support and fallback)
// Example: @include gradient-horizontal(#ffffff, #000000)
// ==========================================================================

@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
  background-color: $endColor;
  background-image: -moz-linear-gradient(left, $startColor, $endColor);
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor));
  background-image: -webkit-linear-gradient(left, $startColor, $endColor);
  background-image: -o-linear-gradient(left, $startColor, $endColor);
  background-image: linear-gradient(to right, $startColor, $endColor);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=1);
}
@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
  background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);
  background-image: -o-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);
  background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0);
}
@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
  background-color: $endColor;
  background-repeat: repeat-x;
  background-image: -moz-linear-gradient($deg, $startColor, $endColor);
  background-image: -webkit-linear-gradient($deg, $startColor, $endColor);
  background-image: -o-linear-gradient($deg, $startColor, $endColor);
  background-image: linear-gradient($deg, $startColor, $endColor);
}
@mixin gradient-radial($innerColor: #555, $outerColor: #333)  {
  background-color: $outerColor;
  background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
  background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
  background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
  background-image: -o-radial-gradient(circle, $innerColor, $outerColor);
  background-repeat: no-repeat;
}
@mixin reset-filter() {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

// ==========================================================================
// Disables Text Selection on Element
// Example: @include no-text-select()
// ==========================================================================

@mixin no-text-select {
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none;
}

// ==========================================================================
// Opacity
// Example: @include opacity(0)
// ==========================================================================

@mixin opacity ($value: 0.5) {
  opacity: $value;
  //-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=” $value * 100 “)”;
  filter: alpha(opacity= $value * 100 );
  zoom: 1;
}

// ==========================================================================
// CSS3 Rounded Corners
// Example: @include rounded-corners(10px)
// ==========================================================================

@mixin rounded-corners($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
       -o-border-radius: $radius;
          border-radius: $radius;

  // keeps background from busting out of border

  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

// ==========================================================================
// CSS3 Transition
// Example: @include transition('background-color 3s linear 1s')
// ==========================================================================

@mixin transition($transition...) {
  -webkit-transition: $transition;
     -moz-transition: $transition;
       -o-transition: $transition;
          transition: $transition;
}

// ==========================================================================
// CSS3 Transform
// Example: @include transition('background-color 3s linear 1s')
// ==========================================================================

@mixin transform($transform) {
  -webkit-transform: $transform;
     -moz-transform: $transform;
       -o-transform: $transform;
          transform: $transform;
}
@mixin rotate($degrees) {
  -webkit-transform: rotate($degrees);
     -moz-transform: rotate($degrees);
      -ms-transform: rotate($degrees);
       -o-transform: rotate($degrees);
          transform: rotate($degrees);
}
@mixin scale($ratio) {
  -webkit-transform: scale($ratio);
     -moz-transform: scale($ratio);
      -ms-transform: scale($ratio);
       -o-transform: scale($ratio);
          transform: scale($ratio);
}
@mixin translate($x, $y) {
  -webkit-transform: translate($x, $y);
     -moz-transform: translate($x, $y);
      -ms-transform: translate($x, $y);
       -o-transform: translate($x, $y);
          transform: translate($x, $y);
}
@mixin skew($x, $y) {
  -webkit-transform: skew($x, $y);
     -moz-transform: skew($x, $y);
      -ms-transform: skewX($x) skewY($y); // See https://github.com/twitter/bootstrap/issues/4885
       -o-transform: skew($x, $y);
          transform: skew($x, $y);
  -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
}
@mixin translate3d($x, $y, $z) {
  -webkit-transform: translate3d($x, $y, $z);
     -moz-transform: translate3d($x, $y, $z);
       -o-transform: translate3d($x, $y, $z);
          transform: translate3d($x, $y, $z);
}


// ==========================================================================
// CSS3 Keyframe Animation (use)
// Example: @include animation('some-anim .5s 1', 'some-anim-again .5s 1 .5s');
// ==========================================================================

@mixin animation($animate...) {
    $max: length($animate);
    $animations: '';

    @for $i from 1 through $max {
        $animations: #{$animations + nth($animate, $i)};

        @if $i < $max {
            $animations: #{$animations + ", "};
        }
    }
    -webkit-animation: $animations;
    -moz-animation:    $animations;
    -o-animation:      $animations;
    animation:         $animations;
}

// ==========================================================================
// CSS3 Keyframe Animation (define)
// Example:
//  @include keyframes(move-the-object) {
//    0%   { left: 100px; }
//    100% { left: 200px; }
//  }
// ==========================================================================

@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
        @content;
    }
    @-moz-keyframes #{$animationName} {
        @content;
    }
    @-o-keyframes #{$animationName} {
        @content;
    }
    @keyframes #{$animationName} {
        @content;
    }
}


// ==========================================================================
// 3 Line Vertical Centering back to IE9
// Example: @include vertical-align();
// Cite: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
// ==========================================================================

@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


// ==========================================================================
// Style Placeholder Text
// Example: @include placeholder{ placeholder: styles };
// Cite: https://gist.github.com/antsa/2170024
// ==========================================================================
@mixin placeholder {
    &::-webkit-input-placeholder {
        @content;
    }

    &:-moz-placeholder { /* Firefox 18- */
        @content;
    }

    &::-moz-placeholder {  /* Firefox 19+ */
        @content;
    }

    &:-ms-input-placeholder {
        @content;
    }
}


// ==========================================================================
// Debug-Only Box Model Outline
// Example: @include debug-outline();
// ==========================================================================
@mixin debug-outline{
  box-shadow: 0px 0px 1px red;
}


// ==========================================================================
// Much Better Font Rendering
// Example: @include optimized-font-rendering();
// https://css-tricks.com/almanac/properties/t/text-rendering/
// ==========================================================================
@mixin optimized-font-rendering{
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum";
}


// ==========================================================================
// No 'Tap' Highlighting on Mobile
// Example: @include no-touch-highlight();
// https://css-tricks.com/snippets/css/remove-gray-highlight-when-tapping-links-in-mobile-safari/
// ==========================================================================
@mixin no-touch-highlight{
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

@mixin overflow-ellipsis{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


// ==========================================================================
// Add Custom Font
// Example: @include declare-font-face('Font Name', '/path-to-font/font') ;
// ==========================================================================
@mixin declare-font-face($font-family, $font-filename, $font-weight : normal, $font-style :normal, $font-stretch : normal) {
  @font-face {
    font-family: '#{$font-family}';
    src: url(('../fonts/#{$font-filename}.eot'));
    src: url(('../fonts/#{$font-filename}.eot?#iefix')) format('embedded-opentype'),
      url(('../fonts/#{$font-filename}.woff')) format('woff'),
      url(('../fonts/#{$font-filename}.otf')) format('opentype'),
      url(('../fonts/#{$font-filename}.svg##{$font-family}')) format('svg');
    font-weight: $font-weight;
    font-style: $font-style;
    font-stretch: $font-stretch;
  }
}


// ==========================================================================
// Makes a triangle dunnit
// Example: @include triangle(top, #f00, 20px);
// ==========================================================================
@mixin triangle($direction, $color: currentcolor, $size: 1em) {
  $size: $size/2;
  $transparent: rgba($color, 0);
  $opposite: (top:bottom, right:left, left:right, bottom:top);

  content: '';
  display: block;
  width: 0;
  height: 0;
  border: $size solid $transparent;
  border-#{map-get($opposite, $direction)}-color: $color;
}



// ==========================================================================
// Common styles
// ==========================================================================

@mixin h4{
  font-family: $h4-family;
  font-size: $h4-size;
  letter-spacing: $h4-spacing;
  text-transform: uppercase;
  font-weight: $h4-weight;
}

@mixin h5{
  display:inline-block;

  padding: $h5-padding;
  position:relative;
  font-family: $h5-family;
  font-size: $h5-size;
  letter-spacing: $h5-spacing;
  text-transform: uppercase;
  font-weight: $h5-weight;

  &:before{
      content: "";
      display:block;
      position:absolute;
      left: 0;
      top: 6px;
      width:100%;
      height: 18px;
      opacity: 0.1;
      background: $color-comet;
  }

  @include break-min($break-switch-fonts){
      font-size: $h5-size-large;
  }
}

@mixin h7{
  font-size: 1.4rem;
  font-family: $font-alright;
  font-weight: $black-weight;
}
